<template>
    <view class="content">
		<image src="../../static/tabbar/return.png" mode="" class="page-return" @tap="back"></image>
		
		<view class="person">
			<view class="list">
				<view class="li-text">{{i18n.user.portrait}}</view>
				<view class="li-right">
					<image :src="imageSrc" mode="" class="li-img" @tap="chooseimage"></image>
				</view>
			</view>
			
			<view class="list">
				<view class="li-text">{{i18n.user.nickname}}</view>
				<view class="li-right">
					<m-input class="input" type="text" v-model="nickname" :placeholder="i18n.user.nicknames" maxlength="20" color="#6D6D72"></m-input>
				</view>
			</view>
			
			<view class="list">
				<view class="li-text">{{i18n.user.account}}</view>
				<view class="li-right">
					<m-input class="input" type="text" v-model="account" :placeholder="i18n.user.accounts" maxlength="20" color="#6D6D72"></m-input>
				</view>
			</view>
		</view>
		
		<button class="btn-submit" @tap="update" v-if="status == 1">{{i18n.user.submit}}</button>
		<button class="btn-submit" v-else>{{i18n.user.submit}}</button>
    </view>
</template>

<script>
	import service from '../../service.js';
	import pageHead from '../../components/page-head.vue';
	import mInput from '../../components/m-input.vue';
	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			pageHead,
			mInput
        },
		data() {
			return {
				token: uni.getStorageSync('token'),
				lang: uni.getStorageSync('lang'),
				imageSrc:'',
				image:'',
				nickname:'',
				account:'',
				title: '',
				status:1,
				type:0,
			};
		},
		onReady:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.user.setting
			})
			//獲取用戶數據
			service.auth(this, service.api.main.user, {
				
			}, function(self, res) {
				var user = res.data;
				uni.setStorageSync('user',user);
				self.nickname = user.nickname;
				self.account = user.account;
				self.imageSrc = user.avatar;
			});
		},
		methods:{
			back(){
				if(this.type == 1){
					uni.showModal({
						content: this.i18n.user.settext,
						cancelText: this.i18n.main.cancel,
						confirmText: this.i18n.main.confirm,
						confirmColor: '#FFAE00',
						cancelColor: '#D2D2D2',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/main/user'
								})
							}
						}
					});
				}else{
					uni.switchTab({
						url: '/pages/main/user'
					})
				}
			},
			chooseimage(){
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album','camera'],
					success: (res) => {
						var imageSrc = res.tempFilePaths[0];
						this.imageSrc = imageSrc;
						this.image = imageSrc;
						this.type = 1;
					}
				});
			},
			update(){
				self = this;
				if (self.nickname.length < 2) {
					uni.showToast({
						icon: 'none',
						title: self.i18n.user.nickname1
					});
					return;
				}
				if (self.account.length < 5) {
					uni.showToast({
						icon: 'none',
						title: self.i18n.user.account1
					});
					return;
				}
				self.status = 0;
				service.upload(this, service.api.user.setting, {
					'nickname': self.nickname,
					'account': self.account,
				}, self.image, 'avatar', function(_self, res) {
					uni.showToast({
						icon: 'none',
						title: res.info
					});
					self.status = 1;
					if(res.code == 1){
						self.type = 0;
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}else{
						self.type = 1;
					}
				});
			}
		}
    }
</script>

<style lang="scss">
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.page-return{
		top: 0;
		z-index: 1000;
	}
	.person{
		width: 100%;
	}
	.list{
		height: 80upx;
		background: #FFFFFF;
		padding: 10upx 30upx;
		border-bottom: 2upx solid #F2F2F2;
	}
	.li-text{
		width:35%;
		height:100%;
		float: left;
		color: #8a8b99;
		font-size: 28upx;
		line-height: 80upx;
	}
	.li-right{
		width:65%;
		height:100%;
		float: left;
	}
	.li-img{
		float: right;
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
	}
	.m-input-view{
		margin: 0;
		width: 100%;
		text-align: right;
	}
</style>